<template>
  <div>
    <myheader></myheader>

    <!-- 面包屑导航 -->
    <Breadcrumb :datas="datas"></Breadcrumb>

    <section class="featured-block text-center">
      <div class="container">
        <table>
          <tr>
            <td style="padding:5px">名称：</td>
            <td style="padding:5px">
              <input type="text" v-model="title" />
            </td>
          </tr>
          <tr>
            <td style="padding:5px">链接：</td>
            <td style="padding:5px">
              <input type="text" v-model="link" />
            </td>
          </tr>
          <tr>
            <td style="padding:5px">图片：</td>
            <td style="padding:5px">
              <input type="file" id="img" />
            </td>
          </tr>

          <tr>
            <td style="padding:5px"></td>
            <td style="padding:5px">
              <Button @click="submit">提交</Button>
            </td>
          </tr>
        </table>
      </div>
    </section>

    <myfooter></myfooter>
  </div>
</template>



<script>
//导包
import myheader from "./myheader.vue";
import myfooter from "./myfooter.vue";
import { config, formatXml } from "../config";

export default {
  data() {
    return {
      msg: "这是一个变量",
      //声明面包屑变量
      datas: [
        { title: "首页", route: { name: "index" } },
        { title: "操作页面" }
      ],
      title: "",
      link: ""
    };
  },
  //注册组件标签
  components: {
    myheader: myheader,

    myfooter: myfooter
  },

  mounted: function() {},
  methods: {
    //添加提交
    submit() {
      let file = document.getElementById("img").files[0];
      let form = new FormData();
      form.append("title", this.title);
      form.append("link", this.link);
      form.append("img", file, file.name);
      this.axios.post("http://localhost:8000/insertpics/");
    }
  }
};
</script>

<style>
</style>